<template>
   <div id="myIndex" v-elastic="{bufferY:50}">
        <div class="updateLoading" v-show="isLoadind">
            <mt-spinner type="fading-circle"></mt-spinner>
       </div>
       <transition name="fade">
          <div class="updateState" v-show="updateState">更新完成</div>
       </transition>
       <ul class="ulP">
           <li v-for="(item,index) in list" :key="index">
              <div :class="{fl:true,IndexLeft:true}">
                <img v-lazy.container="item.url">
              </div>
              <div :class="{fl:true,IndexRight:true}">
                <span>{{item.content}}</span>
                <span :class="{link:true}" @click="$router.push('/my/detail/'+(index+1))">详情 》</span>
              </div>
           </li>
       </ul>
   </div>
</template>

<script>
export default {
  data() {
    return {
      isLoadind: false,
      updateState: false,
      list: [
        {
          url: "./static/images/blue.png",
          content:
            "感情有着极大的鼓舞力量，因此，它是一切道德行为的重要前提，谁要是没有强烈的志向，也就不能够热烈地把这个志向体现于事业中。 —— 凯洛夫"
        },
        { url: "./static/images/pink.png", content: "真正的才智是刚毅的志向。 —— 拿破仑" },
        {
          url: "./static/images/yellow.png",
          content:
            "生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。 —— 奥斯特洛夫斯基"
        },
        {
          url: "./static/images/purple.png",
          content: "志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚"
        },
        {
          url: "./static/images/logo.png",
          content:
            "当教师把每一个学生都理解为他是一个具有个人特点的、具有自己的志向、自己的智慧和性格结构的人的时候，这样的理解才能有助于教师去热爱儿童和尊重儿童。 —— 赞科夫"
        },
        {
          url: "./static/images/yellow.png",
          content: "最糟糕的是人们在生活中经常受到错误志向的阻碍而不自知，真到摆脱了那些阻碍时才能明白过来。 —— 歌德"
        },
        {
          url: "./static/images/blue.png",
          content:
            "志向是天才的幼苗，经过热爱劳动的双手培育，在肥田沃土里将成长为粗壮的大树。不热爱劳动，不进行自我教育，志向这棵幼苗也会连根枯死。确定个人志向，选好专业，这是幸福的源泉。 —— 苏霍姆林斯基"
        },
        {
          url: "./static/images/logo.png",
          content:
            "守住心底那最美风景，成为一种风度，宁静而致远；守住记忆里最美风景，成为一种境界，悠然而豁达；守住生命中最美风景，成为一种睿智，淡定而从容。"
        },
        {
          url: "./static/images/pink.png",
          content: "我们要学会理解红尘的喧嚣变幻，懂得一路从容淡然；要学会原谅人生的不完美，珍惜、善待生命的每一天"
        },
        {
          url: "./static/images/yellow.png",
          content: "让我们扬起生活的风帆，用勤奋去攀登智慧的巅峰，用知识这金钥匙去打开成功的大门吧！用自己火红的青春，点燃光辉灿烂的明天。"
        },
        {
          url: "./static/images/pink.png",
          content:
            "人生就是一连串的抉择，每个人的前途与命运，完全把握在自己手中，只要努力，终会有成。就业也好，择业也罢，创业亦如此，不要活在别人的嘴里，不要活在别人的眼里，而是把命运握在自己手里。"
        },
        {
          url: "./static/images/logo.png",
          content:
            "不是每一个人，都能成为圣人，伟人，平凡的人，有不平凡的经历，不甘平庸，平凡的人，也会有不一样的人生，生活也照样精彩绝伦。就算没有人为我们鼓掌，也要学会自我欣赏。"
        },
        {
          url: "./static/images/yellow.png",
          content: "最糟糕的是人们在生活中经常受到错误志向的阻碍而不自知，真到摆脱了那些阻碍时才能明白过来。 —— 歌德"
        },
        {
          url: "./static/images/blue.png",
          content:
            "志向是天才的幼苗，经过热爱劳动的双手培育，在肥田沃土里将成长为粗壮的大树。不热爱劳动，不进行自我教育，志向这棵幼苗也会连根枯死。确定个人志向，选好专业，这是幸福的源泉。 —— 苏霍姆林斯基"
        },
        {
          url: "./static/images/logo.png",
          content:
            "守住心底那最美风景，成为一种风度，宁静而致远；守住记忆里最美风景，成为一种境界，悠然而豁达；守住生命中最美风景，成为一种睿智，淡定而从容。"
        },
        {
          url: "./static/images/blue.png",
          content:
            "志向是天才的幼苗，经过热爱劳动的双手培育，在肥田沃土里将成长为粗壮的大树。不热爱劳动，不进行自我教育，志向这棵幼苗也会连根枯死。确定个人志向，选好专业，这是幸福的源泉。 —— 苏霍姆林斯基"
        },
        {
          url: "./static/images/logo.png",
          content:
            "守住心底那最美风景，成为一种风度，宁静而致远；守住记忆里最美风景，成为一种境界，悠然而豁达；守住生命中最美风景，成为一种睿智，淡定而从容。"
        },
        {
          url: "./static/images/pink.png",
          content: "我们要学会理解红尘的喧嚣变幻，懂得一路从容淡然；要学会原谅人生的不完美，珍惜、善待生命的每一天"
        },
        {
          url: "./static/images/yellow.png",
          content: "让我们扬起生活的风帆，用勤奋去攀登智慧的巅峰，用知识这金钥匙去打开成功的大门吧！用自己火红的青春，点燃光辉灿烂的明天。"
        },
      ]
    };
  },
  methods:{
    
  },
  mounted() {
    var self = this;
    Event.$on(
      "isLoading",
      function(isLoading) {
        this.isLoadind = isLoading;
        if (isLoading == 0) {
          this.updateState = true;
          setTimeout(function() {
            self.updateState = false;
          }, 2000);
        }
      }.bind(this)
    );
  }
};
</script>

<style scoped>
#myIndex li {
  overflow: hidden;
  width: 100%;
  height: 1.5rem;
  border-bottom: 1px solid #ccc;
  padding: 0.1rem 0;
  position: relative;
}
.IndexLeft {
  width: 20%;
}
.IndexRight {
  width: 80%;
  text-indent: 2em;
  margin: 0.05rem 0 0.5rem 0;
  line-height: 0.35rem;
}
.link {
  position: absolute;
  right: 0;
  bottom: 0.1rem;
  color: red;
}


.fade-enter-active,
.fade-leave-active {
  transition: all 2s ease;
}
.fade-enter,
.fade-leave {
  opacity: 0;
  /* width: 100px;
  height: 100px; */
}
.fade-enter-active {
  opacity: 1;
  /* width: 300px;
  height: 300px; */
}
.fade-leave-active {
  opacity: 0;
  /* width: 100px;
  height: 100px; */
}
</style>
